<template>
	<view>
		<view class="header">
			<view class="tips" @click="handleJump">提示</view>
		</view>
		<template v-if="data.formula_id === 7">
			<view class="freight">
			<view class="freight-item">
				<view class="item-title">超长费</view>
				<view class="item-value">{{data.costprice}}</view>
			</view>
			<view class="freight-item">
				<view class="item-title">运费</view>
				<view class="item-value">{{data.sumprice}}</view>
			</view>
			<view class="freight-item">
				<view class="item-title">派件费</view>
				<view class="item-value">{{data.sendweight}}</view>
			</view>
			<view class="freight-item">
				<view class="item-title">运费合计</view>
				<view class="item-value">{{data.dispatch_fee}}</view>
			</view>
		</view>
		</template>


		<template v-if="data.formula_id === 8">
			<view class="freight">
				<view class="freight-item">
					<view class="item-title">总重量</view>
					<view class="item-value">{{data.sumprice}}</view>
				</view>
				<view class="freight-item">
					<view class="item-title">总体积</view>
					<view class="item-value">{{data.volume_air_all}}</view>
				</view>
				<view class="freight-item">
					<view class="item-title">总收取费用</view>
					<view class="item-value">{{data.dispatch_fee}}</view>
				</view>
			</view>
		</template>


		<view class="content">
			<template v-if="data.formula_id === 7">
				<view class="list-item" v-for="(item,index) in data.list" :key="item.logistics_number">
					<view class="item title">{{item.logistics_number}}</view>
					<view class="item">{{item.good_quantity}}</view>
					<view class="item">尺寸：{{item.size}}</view>
					<view class="item">{{item.good_type}}</view>
					<view class="item">实重：{{item.good_weight}}</view>
					<view class="item">体积重：{{item.volume_air_all}}</view>
					<view class="item red">收费重：{{item.charge_all}}</view>
					<view class="item">单价：{{item.weight_price}}</view>
					<view class="item">超长费：{{item.costprice}}</view>
					<view class="item red">收取费用：{{item.sumprice}}</view>
				</view>
			</template>

			<template v-if="data.formula_id === 8">
				<view class="list-item" v-for="(item,index) in data.list" :key="item.logistics_number">
					<view class="item title">{{item.logistics_number}}</view>
					<view class="item">{{item.good_quantity}}</view>
					<view class="item">品名：{{item.good_type}}</view>
					<view class="item">重量：{{item.good_weight}}</view>
					<view class="item">尺寸：{{item.size}}</view>
					<view class="item">材积：{{item.volume_air_all}}</view>
					<view class="item">收费单价：{{item.price}}</view>
					<view class="item">收取费用：{{item.sumprice}}</view>
					<view class="item red ">材积/重量收取类别：{{item.typerow}}</view>
          <view class="item"></view>
          <view class="item">数量：{{item.good_number }}</view>
          <view class="item">材质：{{item.good_texture}}</view>
          <view class="item">用途：{{item.good_purpose}}</view>
          <view class="item">品牌：{{item.good_brand}}</view>
          <view class="item">产品：{{item.good_quantity}}</view>
          <view class="item" style="display: flex; align-items: center;">
            <view style="white-space: nowrap;">图片：</view>
            <a :href="item.good_pic" target="_blank" style="text-decoration:none;" v-if="item.good_pic">
              <view style="white-space: nowrap;">【点击查看】</view>
            </a>
          </view>
				</view>
			</template>
		</view>
	</view>
</template>

<script>
	import {storehouseJudgelistApi} from '@/api/index.js';
	export default{
		data(){
			return{
				param:{},
				data:{}
			}
		},
		async onLoad(options) {
			let ids = uni.getStorageSync('packids') || ''
			this.param = ids === '' ? {}:JSON.parse(decodeURIComponent(ids));
			if(ids != ''){
				uni.removeStorageSync('packids')
			}
			this.getStorehouseJudgelistApi(this.param)
		},
		methods:{
			async getStorehouseJudgelistApi(param){
				try{
					const res = await storehouseJudgelistApi(param)
					this.data = res.data
				}catch(e){
				 
				}	
			},
			handleJump(){
				const formula_id = this.data.formula_id || ''
				uni.navigateTo({
					url:`/pages/order/tips-detail?formula_id=${formula_id}`
				})
			},
		}
	}
</script>

<style lang="scss">
	.header{
		padding: 15px;
		width: 100%;
		box-sizing: border-box;
		.tips{
			width: 100%;
			height: 56rpx;
			background-color: #000;
			font-size: 28rpx;
			color: #fff;
			border-radius: 14rpx;
			text-align: center;
			line-height: 56rpx;
		}
	}
	.freight{
		padding: 15px;
		width: 100%;
		box-sizing: border-box;
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		grid-gap: 8px;
		.item-title{
			font-size: 24rpx;
			font-weight: 500;
			color: #E82E2E;
			text-align: center;
		}
		.item-value{
			height: 64rpx;
			text-align: center;
			line-height: 64rpx;
			border-radius: 14rpx;
			border: 2rpx solid #E6E6E6;
		}
	}
	
	.content{
		padding: 0 30rpx;
		.list-item{
			min-height: 200rpx;
			padding: 20rpx;
			border-radius: 14rpx;
			border: 2rpx solid #E6E6E6;
			box-sizing: border-box;
			display: grid;
			grid-template-columns: repeat(3, 1fr);
			grid-template-areas: 'h h h';
			grid-gap: 8px;
			.item{
				font-size: 24rpx;
				font-size: 500;
				color: #333;
				overflow: hidden;
			}
			.red{
				color: #E82E2E;
			}
			.title{
				grid-area: h;
			}
		}
	}
</style>